<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pano SDK Demo&Debug page</title>
    <style>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      body {
        padding: 0 30px;
      }
      td input {
        border: none;
        outline: none;
        padding-left: 10px;
      }
    </style>
</head>
<body>
  <div id="params" style="display: flex; justify-content: center; white-space: nowrap">
    <table border="1"  align = "center">
      <tr align="center" height="40">
        <td colspan="2">Channel Parameters</td>
    </tr>
    <tr align="center" height="40"> 
      <td>Note</td>
      <td style="text-align: left;padding-left: 10px;font-size: 13px;">
        Please refer to <a href="https://developer.pano.video/getting-started/terms/" target="developer">Glossary</a> to understand the meaning of App ID, Channel ID, Token, User ID, and User Name.
        <br>请参考 <a href="https://developer.pano.video/getting-started/terms/" target="developer">名词解释</a> 了解App ID、Token、Channel ID、User ID、User Name的含义。
        <br><br>You can use <a href="https://developer.pano.video/getting-started/firstapp/#14-%E7%94%9F%E6%88%90%E4%B8%B4%E6%97%B6token" target="developer">temporary token</a> for temporary testing.
        <br>可以使用 <a href="https://developer.pano.video/getting-started/firstapp/#14-%E7%94%9F%E6%88%90%E4%B8%B4%E6%97%B6token" target="developer">临时token </a>来进行临时测试。</td>
    </tr>
    <tr align="center" height="40"> 
      <td>RTCServer</td>
      <td align="left"><input id="rtcServer" style="width: 100%;height: 38px;font-size:14px;" type="text"
         placeholder="[私有化部署Pano系统时需要修改rtcServer，公有云请留空]" value=""/></td>
    </tr>
    <tr align="center" height="40"> 
      <td>App ID</td>
      <td align="left"><input id="appID" style="width: 100%;height: 38px;font-size:14px;" type="text" placeholder="[通过Pano控制台创建App获取AppID]" value=""/></td>
    </tr>
    <tr align="center" height="40"> 
      <td>Token</td>
      <td align="left"><input id="token" style="width: 100%;height: 38px;font-size:14px;" type="text" placeholder="[使用正式Token，或者在Pano控制台对应App下生成临时Token]"
        value=""/>
      </td>
    </tr>
    <tr align="center" height="40"> 
      <td>Channel ID</td>
      <td align="left"><input id="channelID" style="width: 100%;height: 38px;font-size:14px;" type="text" placeholder="[生成token时指定的channelID]" value=""></td>
    </tr>
    <tr align="center" height="40"> 
      <td>Channel Mode</td>
      <td style="text-align: left;padding-left:10px;">
        meeting <input type="radio" value="meeting" name="channelMode" checked>
        <!-- 1_on_1 <input type="radio" value="1v1" name="channelMode"> -->
      </td>
    </tr>
    <tr align="center" height="40"> 
      <td>User ID</td>
      <td align="left"><input id="userID" style="width: 100%;height: 38px;font-size:14px;" type="text"></td>
    </tr>
    <tr align="center" height="40"> 
      <td>User Name</td>
      <td align="left"><input id="userName" style="width: 100%;height: 38px;font-size:14px;" type="text"></td>
    </tr>
    </table>
  </div>
  <div id="meeting_control" align="center" style="background-color: lightgrey; width:100%; margin: 10px auto; padding: 5px; display: flex; align-items: center; flex-direction: column;">
    <div>
      <button id="joinChannel" style="height:30px;width:100px;color: green;font-size:13px;">Join Channel</button>
      <button id="leaveChannel" style="height:30px;width:110px;font-size:13px;" disabled>Leave Channel</button>
      <button id="muteMic" style="height:30px;width:90px;color: green;font-size:13px;">Mute Mic</button>
      <button id="audioButton" style="height:30px;width:110px;color: green;font-size:13px;">Start Audio</button>
      <button id="videoButton" style="height:30px;width:110px;color: green;font-size:13px;">Start Video</button>
      <button id="shareButton" style="height:30px;width:110px;color: green;font-size:13px;">Start Screen</button>
      <button id="muteScreen" style="height:30px;width:110px;color: green;font-size:13px;">Mute Screen</button>
    </div>

    <div>
      <button id="subscribeVideo" style="height:30px;width:150px;color: green;font-size:13px;">Subscribe Video</button>
      <select id="videoUsers" style="height:30px;width:150px;"></select>
      <select id="subQuality" style="height:30px;width:80px;">
        <option value="Lowest">90P</option>
        <option value="Low">180P</option>
        <option value="Standard">360P</option>
        <option value="HD720P" selected>720P</option>
        <option value="HD1080P">1080P</option>
      </select>
      <button id="unSubscribeVideo" style="height:30px;width:150px;color: green;font-size:13px;">Unsubscribe Video</button>
    </div>
    <div>
      <button id="subscribeScreen" style="height:30px;width:150px;color: green;font-size:13px;">Subscribe Screen</button>
      <select id="screenUsers" style="height:30px;width:150px;"></select>
      <button id="unsubscribeScreen" style="height:30px;width:150px;color: green;font-size:13px;">Unsubscribe Screen</button>
    </div>

    <div>
      <button id="snapshotVideo" style="height:30px;width:150px;color: green;font-size:13px;">Snapshot My Video</button>
      <select id='snapshotImgObjType'  style="height:30px;width:110px;">
        <option value='base64String'>base64String</option>
        <option value='blobFile'>blobFile</option>
      </select>
      <input id="snapshotTarget" style="height:30px;width:150px" placeholder="userId to snapshot"></input>
    </div>
  </div>

  <div id="countdown" align="center" style="background-color: lightgrey; width:100%; margin: 10px auto; padding: 5px; display: none;"></div>

  <div id="deviceArea" align="left" style="background-color: lightgrey; width: 100%; margin: 10px auto; padding: 5px; display: flex; flex-direction: column; align-items: center;">
    <div >
      <button id="getMics" style="height:30px; width:100px;color: green;font-size:13px; display: inline;">Get Mics</button>
      <select style="width: 300px; display: inline;" id="mic_sel"></select>
      <button id="setMic" style="height:30px;width:100px;color: green;font-size:13px; display: inline;">Set Mic</button>
    </div>

    <div>      
      <button id="getSpeakers" style="height:30px;width:100px;color: green;font-size:13px;">Get Speakers</button>
      <select style="width: 300px" id="speaker_sel"></select></button>
      <button id="setSpeaker" style="height:30px;width:100px;color: green;font-size:13px;">Set Speaker</button>
    </div>
    <div>
      <button id="getCams" style="height:30px;width:100px;color: green;font-size:13px;">Get Cameras</button>
      <select style="width: 300px" id="cam_sel"></select></button>
      <button id="getPreview" style="height:30px;width:150px;color: green;font-size:13px;">Get Preview</button>
      <button id="setCam" style="height:30px;width:100px;color: green;font-size:13px;">Set Camera</button>

    </div>
    <div>
    </div>

  </div>
  <div id="inMeetingArea" align="center" style="background-color: lightgrey; width:100%; margin: 10px auto; padding: 5px; display: flex; flex-direction:row;height: 800px;">
    <div id="videoArea" align="center" style="width:calc(100% - 610px); height:auto; float:left;">
      <div id="selfVideoArea" ></div>
      <div id="previewVideoArea" ></div>
      <div id="snapshotImg"></div>
      <div id="activeVideoArea"></div>
    </div>
    <div style="width:300px; float: right; margin-left: 10px; height: 500px;">
      <label>Events</label>
      <textarea id="events" style="width:100%; height: 500px;">
      </textarea>
    </div>
    <div id="roster" align="center" style="width:300px; float: right; height: 500px;">
      <label>Roster List</label>
      <textarea id="meeting_roster" style="width:100%; height: 500px;">
      </textarea>
    </div>
  </div>
<script src="./index.js"></script>

</body>
</html>
